<template>
    <section>
        <el-dialog :title="title" :visible.sync="localShow" width="30%" :close-on-click-modal="false" destroy-on-close>
            <span>
                <form>
                    <el-form :model="localForm" label-width="80px">
                        <el-form-item label="用户名">
                            <el-input v-model="localForm.username" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称">
                            <el-input v-model="localForm.nickname" placeholder="请输入昵称"></el-input>
                        </el-form-item>
                    </el-form>
                </form>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="send">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
export default {
    props: {
        isShow: {
            type: Boolean,
            default: false
        },
        form: {
            type: Object,
            default: () => { }
        },
        title: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            localShow: this.isShow,
            localForm: Object.assign({}, this.form)
        }
    },
    watch: {
        isShow(val) {
            this.localShow = val
        },
        form(val) {
            this.localForm = val
        }
    },
    methods: {
        closeDialog() {
            this.localShow = false
            this.$emit('closeDialog', this.localShow)
        },
        send() {
            this.localShow = false
            this.$emit('sendRequest', this.localShow, this.localForm)
        }

    }
}
</script>

<style></style>